<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第四题</p>
      <input
        type="text"
        :class="{ focused: focused, valid: ifvalid, invalid: ifinvalid }"
        @focus="iff"
        @blur="ifb"
        v-model="valid"
      />
    </div>
    <div>
      <p>第五题</p>
      <div :style="five">样式绑定基础</div>
      <input
        type="button"
        value="切换"
        @click="
          (() => (five.backgroundColor = '#ff0000'),
          (five.fontSize = '20px'),
          (five.color = '#fff'))
        "
      />
    </div>
    <div>
      <p>第六题</p>
      <img src="@\assets\1.jpg" :style="[big]" />
      <input type="button" value="变大" @click="bigfn" />
      <input type="button" value="恢复" @click="restore" />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

//第四题
let focused = ref(false)
let ifvalid = ref(false)
let ifinvalid = ref(true)
let valid = ref('')
function iff() {
  focused.value = true
  upvalid()
}
function ifb() {
  focused.value = false
  upvalid()
}
function upvalid() {
  if (valid.value) {
    ifvalid.value = true
    ifinvalid.value = false
  } else {
    ifinvalid.value = true
    ifvalid.value = false
  }
}
watch(valid, () => {
  upvalid()
})
//第五题
let five = reactive({
  backgroundColor: '#f0f0f0',
  fontSize: '16px',
  color: '#333',
})
//第六题
let big = reactive({
  width: '200px',
  height: '200px',
})
function bigfn() {
  ;(big.width = '300px'), (big.height = '300px')
}
function restore() {
  ;(big.width = '200px'), (big.height = '200px')
}
</script>
